$control-calendar: (text-color: getCssVar(color-text-0),
    hover-bg-color: getCssVar(color, fill, 0),
    active-bg-color: getCssVar(color, fill, 0),
    border-color: getCssVar(color, primary, active),
    font-size: getCssVar(font-size, small),
    item-padding: getCssVar(spacing, tight),
    border-radius: getCssVar(border-radius, small),
    margin: getCssVar(spacing, extra-tight),
);

@include b(control-calendar) {
    @include set-component-css-var(control-calendar, $control-calendar);

    width: 100%;
    height: 100%;

    @include e(calendar-item) {
        display: flex;
        gap: getCssVar(spacing, base-tight);
        align-items: center;
        padding: getCssVar(control-calendar, item-padding);
    }

    @include e(icon) {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
}


@include b(control-calendar-content) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .el-calendar {
        display: flex;
        flex-direction: column;
    }

    .el-calendar-table,
    .el-calendar-table .el-calendar-day {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .el-calendar-table {
        flex: 1;
        width: fit-content;
    }

    .el-calendar-table .el-calendar-day:hover {
        cursor: pointer;
        background-color: var(--el-calendar-selected-bg-color);

    }

    .el-calendar__body {
        display: flex;
        flex: 1;
        padding: 0
    }

}

@include b(control-calendar-item) {
    @include set-component-css-var(control-calendar, $control-calendar);

    height: 100%;
    padding: getCssVar(control-calendar, item-padding);
    margin-bottom: getCssVar(control-calendar, margin);
    overflow: hidden;
    font-size: getCssVar(control-calendar, font-size);
    color: getCssVar(control-calendar, text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border: solid .5px transparent;
    border-radius: getCssVar(control-calendar, border-radius);

    &:hover {
        background-color: getCssVar(control-calendar, hover-bg-color);
    }

    @include when(active) {
        background-color: getCssVar(control-calendar, active-bg-color);
        border: solid 0.5px getCssVar(control-calendar, border-color);
    }
}

@include b(control-calendar-date-text) {
    @include set-component-css-var(control-calendar, $control-calendar);

    padding: getCssVar(control-calendar, item-padding);
    margin-top: 0;
}

@include b(control-calendar-day) {
    height: fit-content;
}

@include b(control-calendar-content-header) {
    @include set-component-css-var(control-calendar, $control-calendar);

    display: flex;
    gap: getCssVar(control-calendar, item-padding);
    align-items: center;
}

@include b(control-calendar-footer) {
    display: flex;
    gap: getCssVar(spacing, base-loose);
    justify-content: flex-end;
}